<template>
  <div class="bottomChild">
    <span class="topTitle">简历投递曲线</span>
    <!--echarts图-->
    <div id="myEcharts"></div>

    <!--右侧下拉选择框-->
    <div class="selectBox">
      <a-select default-value="按天" style="width: 80px" @change="handleChange">
        <a-select-option value="按天"> 按天 </a-select-option>
        <a-select-option value="按月"> 按月 </a-select-option>
      </a-select>
    </div>

    <!--底部文字-->
    <div class="bottom">
      <div class="leftBox">X轴:&nbsp;时间</div>
      <div class="rightBox">Y轴:&nbsp;简历投递数</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "bottomChild",
  data() {
    return {
      option: {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c}",
        },

        xAxis: {
          type: "category",
          data: ["12-12", "12-13", "12-14", "12-15", "12-16", "12-17", "12-18"],
          splitLine: {
            show: false,
          },
          axisLabel: {
            textStyle: {
              color: "gray", //坐标值的具体的颜色
            },
            interval: 0,
          },
          axisTick: {
            alignWithLabel: true,
          },
        },
        yAxis: {
          type: "value",
          // max: 90,
          // min: 10,
          // //splitNumber: 5,
          splitLine: {
            show: false,
          },
          axisLabel: {
            textStyle: {
              color: "gray", //坐标值的具体的颜色
            },
          },
        },
        series: [
          {
            name: "流量详情",
            type: "line",
            stack: "总量",
            smooth: true, //平滑线条
            symbol: "none", //去掉折线点
            center: ["50%", "45%"], //绘图位置
            areaStyle: {
              normal: {
                //改变折线区域颜色渐变
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "#1601e4",
                    },
                    {
                      offset: 1,
                      color: "#04005e",
                    },
                  ],
                  false
                ),
              },
            },
            itemStyle: {
              normal: {
                color: "#275F82", //改变折线点的颜色
                lineStyle: {
                  color: "#04d0f5", //改变折线颜色
                },
              },
            },
            lineStyle: {
              normal: {
                width: 4,
              },
            },
            data: [10, 32, 41, 24, 90, 60, 20],
          },
        ],
      },
    };
  },
  mounted() {
    this.initMyEchart();
  },
  methods: {
    initMyEchart() {
      var myChart = this.$echarts.init(document.getElementById("myEcharts"));
      myChart.setOption(this.option);
    },
    handleChange(e) {
      console.log('下拉框选择事件',e)
    }
  },
};
</script>

<style lang="less" scoped>
.bottomChild {
  height: 290px;
  background: url("../../../assets/数据屏/左2@2x.png") no-repeat;
  background-size: 100% 100%;
  background-position: center center;
  position: relative;
  .topTitle {
    position: absolute;
    left: 50%;
    top: 8px;
    transform: translateX(-50%);
    font-weight: 600;
    color: #feffff;
    font-size: 15px;
  }
  /deep/#myEcharts {
    position: absolute;
    left: 50%;
    top: 80px;
    transform: translateX(-50%);
    width: 100%;
    height: 70%;
    div{
      width: 100% !important;
      canvas{
        width: 100% !important;
      }
    }
    // background-color: red;
  }
  /deep/.selectBox {
    position: absolute;
    top: 30px;
    right: 20px;
    width: 90px;
    height: 35px;
    .ant-select{
      
      .ant-select-selection{
        background-color: #052363 !important;
        border: 1px solid #0a3f8f !important;
        .ant-select-selection__rendered{
          color: aliceblue;
        }
        .ant-select-arrow{
          color: aliceblue;
        }
      }
    }
  }
  .bottom {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 50%;
    height: 40px;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    // font-size: 13px;
    font-weight: 600;
    color: gray;
    .leftBox{
      
    }
  }
}
</style>
